import React, { useState } from "react";
import style from "./batchglobalpayment.module.scss";
import { Button, Col, Select, Form, Input, Card, Row, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
export default function BatchGlobalPayment() {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const uploadButton = (
    <>
      <Button icon={<UploadOutlined />}>
        {/* 点击上传文件 */}
        {t("message.uploadFile")}
      </Button>
    </>
  );
  return (
    <div className={style.BatchGlobalPaymentboss}>
      <Card
        // title="批量全球付款"
        title={t("layout.BatchGlobalPayment")}
        extra={<a href="#">More</a>}
        style={{ width: "100%", height: "100%", textAlign: "left" }}
      >
        <Form labelAlign="right">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="name"
                // label="子商户名称"
                label={t("form.Submerchantname")}
                rules={[
                  {
                    required: true,
                    // message: "请输入账户号",
                  },
                ]}
              >
                <Select>
                  <Select.Option value="demo">Demo</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="url"
                label={t("form.PayerAccountName")}
                // label="付款方账户名称"
                rules={[
                  {
                    required: true,
                    // message: "请输入账户名称",
                  },
                ]}
              >
                <Select>
                  <Select.Option value="demo">Demo</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="Identification"
                label={t("form.PayerAccountName")}
                // label="付款方账户账号"
                rules={[
                  {
                    required: true,
                    // message: "请输入银行识别码",
                  },
                ]}
              >
                <Input
                  style={{
                    width: "100%",
                  }}
                  allowClear
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="type"
                label={t("form.paymentCurrency")}
                // label="付款币种"
                rules={[
                  {
                    required: true,
                    // message: "请选择账户类型",
                  },
                ]}
              >
                <Input
                  style={{
                    width: "100%",
                  }}
                  allowClear
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="accountCountry"
                rules={[
                  {
                    required: true,
                  },
                ]}
                // label="批量付款报盘"
                label={t("form.BatchPaymentOffer")}
              >
                <Upload
                  name="avatar"
                  //   listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  //   beforeUpload={beforeUpload}
                  //   onChange={handleChange}
                >
                  {uploadButton}
                </Upload>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Row gutter={16}>
          <Button type="primary">
            {/* // 提交 */}
            {t("form.Submit")}
          </Button>
        </Row>
      </Card>
    </div>
  );
}
